<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul {
    width: 300px;
    margin: 50px auto;
}

li {
    box-sizing: border-box;
    width: 100px;
    height: 50px;
    float: left;
    border: 1px solid #000;
    
    text-align: center;
    line-height: 50px;
    
    font-weight: 700;
}

button {
    width: 200px;
    height: 100px;
    display: block;
    margin: 50px auto;
    
    font-size: 40px;
}
</style>
</head>
<body>
<button>开始抽奖</button>
<ul>

</ul>
<script>
var names = ["张三", "李四", "王五", "志玲", "凤姐", "德华"]
var ul = document.querySelector("ul");
showAllNames();
function showAllNames(){
    // 创建 li
    for (var name of names){
        var li = document.createElement("li");
        li.innerHTML = name;
        ul.appendChild(li)
    }
}
//抽奖功能
document.querySelector("button").onclick = function (){
    // 抽奖
    var wins = getWins();
    // 显示中奖的人
    showWins(wins);
}

/**
 * 显示中奖的人
 */
function showWins(wins){
    var lis = document.querySelectorAll("ul > li");
    // 每个 li 的背景色清除
    for(var li of lis){
        li.style.backgroundColor = "";
    }
    // 把中奖人的背景色设置为 pink
    for(var index of wins){  // 0 3 4 2
        lis[index].style.backgroundColor = "pink";
    }
}
/**
 * 抽奖的操作
 */
function getWins(){
    var wins = [];
    // 外循环是控制生成的下标的个数
    for (var i = 0; i < 3; i++){
        // 保证我们每次生成的不重复
        while(true){
            var index = randomInt(0, names.length - 1);
            if (wins.indexOf(index) == -1){  // 表示我们抽取的下标不存在
                wins.push(index);
                break;
            }
        }
    }
    return wins;
}

/**
 作者:李振超      2017年8月1日 09:21
 返回随机的 [from, to] 之间的整数(包括from，也包括to)
 */
function randomInt(from, to){
    return parseInt(Math.random() * (to - from + 1) + from);
}

</script>
</body>
</html>
<!--
    作者：李振超  2017年8月1日08:52
    
-->